﻿<UserControl x:Class="Teudu.InfoDisplay.GuideControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:teudu="clr-namespace:Teudu.InfoDisplay"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <Style TargetType="TextBlock" x:Key="WarningText">
            <Setter Property="FontSize" Value="28"></Setter>
            <Setter Property="Foreground" Value="Red"></Setter>
        </Style>
        <Storyboard x:Key="MainShowAnimation">
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="Bar"
                Storyboard.TargetProperty="(UserControl.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)"
                Duration="0:0:07" IsAdditive="False">
                <EasingDoubleKeyFrame KeyTime="0:0:01" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase EasingMode="EaseInOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <LinearDoubleKeyFrame KeyTime="0:0:06" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:07" Value="60">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase EasingMode="EaseInOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="TextEmphasizeAnimation">
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="Opacity"
                Duration="0:0:05">
                <EasingDoubleKeyFrame KeyTime="0:0:00" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:01" Value="1">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CubicEase EasingMode="EaseOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="0:0:04" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:05" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CubicEase EasingMode="EaseIn" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <teudu:BoolToOpacityConverter x:Key="opacityConverter"/>
        <teudu:BoolToVisibleConverter x:Key="visibilityConverter"/>
    </UserControl.Resources>
    <Canvas Width="{Binding Width,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}">
        <StackPanel x:Name="Bar" Panel.ZIndex="50" Orientation="Horizontal" Background="Black" Height="60" Width="{Binding Width,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}">
            <Grid Width="{Binding Width,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}" VerticalAlignment="Center">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.25*"></ColumnDefinition>
                    <ColumnDefinition Width="0.5*"></ColumnDefinition>
                    <ColumnDefinition Width="0.25*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Image Source="{Binding HelpImage, NotifyOnTargetUpdated=True}" Height="50" HorizontalAlignment="Left" Grid.Column="2">
                    <Image.Triggers>
                        <EventTrigger RoutedEvent="Binding.TargetUpdated">
                            <BeginStoryboard>
                                <StaticResource ResourceKey="TextEmphasizeAnimation"/>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Image.Triggers>
                </Image>
                <!--<TextBlock Text="{Binding WarningMessage, NotifyOnTargetUpdated=True}" HorizontalAlignment="Center" Style="{StaticResource WarningText}" VerticalAlignment="Center" Grid.Column="1" Visibility="{Binding ShowingWarning, Converter={StaticResource visibilityConverter}}">
                    <TextBlock.Triggers>
                        <EventTrigger RoutedEvent="Binding.TargetUpdated">
                            <BeginStoryboard>
                                <StaticResource ResourceKey="MainShowAnimation"/>
                            </BeginStoryboard>
                            <BeginStoryboard>
                                <StaticResource ResourceKey="TextEmphasizeAnimation"/>
                            </BeginStoryboard>
                        </EventTrigger>
                    </TextBlock.Triggers>
                </TextBlock>-->

                <TextBlock Text="{Binding HelpMessage, NotifyOnTargetUpdated=True}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1">
                    <TextBlock.Triggers>
                        <EventTrigger RoutedEvent="Binding.TargetUpdated">
                            <SoundPlayerAction Source="/Teudu.InfoDisplay;component/Sounds/guidePopup.wav" />
                            <BeginStoryboard>
                                <StaticResource ResourceKey="MainShowAnimation"/>
                            </BeginStoryboard>
                            <BeginStoryboard>
                                <StaticResource ResourceKey="TextEmphasizeAnimation"/>
                            </BeginStoryboard>
                        </EventTrigger>
                    </TextBlock.Triggers>
                </TextBlock>
            </Grid>
            <StackPanel.RenderTransform>
                <TransformGroup>
                    <TranslateTransform x:Name="MainTranslate" Y="60"></TranslateTransform>
                </TransformGroup>
            </StackPanel.RenderTransform>
        </StackPanel>
    </Canvas>
</UserControl>
